<template>
  <div>
    <v-dialog v-model="dialog" max-width="500px">
      <v-card>
        <v-card-title>{{ title }}</v-card-title>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn text @click="closeDialog">取消</v-btn>
          <v-btn text color="error" @click="deleteItem">确定</v-btn>
        </v-card-actions>
        <!--  <v-card-actions>
          <v-btn text color="error" @click="deleteItem">Delete</v-btn>
          <v-btn text @click="closeDialog">Cancel</v-btn>
        </v-card-actions> -->
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    value: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      dialog: false
    }
  },
  watch: {
    value(val) {
      this.dialog = val
    }
  },
  methods: {
    deleteItem() {
      // 执行删除操作
      // ...
      this.$emit('deleteItem') // 确定删除
      this.$emit('closeDialog') // 关闭对话框
    },
    closeDialog() {
      this.$emit('closeDialog') // 关闭对话框
    }
  }
}
</script>

<style lang="scss" scoped></style>
